<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <body>
        <script>
            // 1. 实例成员：实例对象的属性和方法
            // 实例对象彼此独立，互不影响

            // 2. 静态成员：构造函数的属性和方法
            // 静态成员只有一份，所有实例对象共享，只能通过构造函数调用
            function Person(username, age) {
                // 实例成员
                this.username = username;
                this.age = age;
                // 静态成员 不能写在构造函数里面，也调用不了
                let count = 0;
            }
            // 静态成员
            Person.count = 5;
            console.log(Person.count);
            const person = new Person('pink', 18);
            console.log(person.count); // undefined


            // 使用class定义静态成员和构造函数
            class Person2 {
                // 静态成员 static要配合class使用
                static count = 5;
                // 构造函数
                constructor(username, age) {
                    // 实例成员
                    this.username = username;
                    this.age = age;
                }
            }


            // js把简单数据类型包装成对象，这样就可以调用对象的方法
            const str = 'pink';
            console.log(str.length); // 4

            // Object是内置的构造函数
            // 常用静态方法
            // Object.keys() 返回对象的所有可枚举属性的键名（可枚举属性：对象自身的属性，不包括继承的属性）
            // Object.values() 返回对象的所有可枚举属性的键值
            // Object.assign(目标，源) 复制对象，是浅拷贝（只复制一层） 也能用来追加属性
            const from = {username: 'pink', age: 18};
            Object.assign(from, {gender: '女'});
            console.log(from); // {username: "pink", age: 18, gender: "女"}

            // Array是内置的构造函数
            // 常用实例方法：forEach filter map reduce(累加) find every some concat
            // reduce：常用于求和
            const arr = [1, 2, 3, 4, 5];
            // arr.reduce((prev, cur, index, arr) => {}, 起始值)
            // reduce的参数：prev上一次的返回值 cur当前元素 index当前元素的索引 arr当前数组 0初始值
            const sum = arr.reduce((prev, cur) => prev + cur, 0);

            // 伪数组转换为数组
            // 伪数组：1. 有length属性 2. 按索引存储数据 3. 不具备数组的方法
            // Array.from(伪数组) 或者 [...伪数组] 前者更加强大，可以传入第二个参数，对每个元素进行处理，也支持不可迭代对象（类数组对象）

        </script>

    </body>
</html>